import React from 'react';
// import { Carousel, WingBlank } from 'antd-mobile';


import $ from 'jquery';
import { HashRouter as Router,Route,NavLink,Prompt} from 'react-router-dom';
import '../css/home.css';
import Productlist from './Productlist';
// import { Carousel } from 'antd';

import { Carousel, WingBlank } from 'antd-mobile';
	
	



  
class Home extends React.Component{
	
	constructor(props){
		super(props)
		this.state = {
				llist:[],
				lblist:[],
				data: ['1', '2', '3'],
				imgHeight: 176,
		  }
	}
	
	  componentDidMount() {
		// simulate img loading
		setTimeout(() => {
		  this.setState({
			data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
		  });
		}, 100);
	  }
	
	render(){
		console.log(this.state.llist)
		console.log(this.state.lblist)
		return(
			<div className="dabox">
				<header className="header-h">
					<input type="text" placeholder="商品名称/助记码/生产企业"/> 
				</header>
				<div className="home-section">
		
					<div className="home-lunbo">
							<WingBlank>
								<Carousel
								autoplay={false}
								infinite
								beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
								afterChange={index => console.log('slide to', index)}
								>
								{this.state.lblist.map(function(item,i){

								
									return(
									<img
										key={i}
										src={item.banner_img_url}
										alt=""
										style={{ width: '100%', height:'100%',verticalAlign: 'top' }}
										onLoad={() => {
										// fire window resize event to change height
										window.dispatchEvent(new Event('resize'));
										
										}}
									/>
									)
								}) }
								</Carousel>
							</WingBlank>
					</div>

					<div className="home-daohang">
						<dl>
							<NavLink to="/productlist">
							<dt><img src={this.state.llist[0].pimg}/></dt>
							<dd>全部商品</dd>
							</NavLink>
						</dl>
						<dl>
							<NavLink to="/productlist">
							<dt><img src={this.state.llist[5].pimg}/></dt>
							<dd>药团购</dd>
							</NavLink>
						</dl>
						<dl>
							<NavLink to="/productlist">
							<dt><img src={this.state.llist[2].pimg}/></dt>
							<dd>药促销</dd>
							</NavLink>
						</dl>
						<dl>
							<NavLink to="/productlist">
							<dt><img src={this.state.llist[3].pimg}/></dt>
							<dd>药求购</dd>
							</NavLink>
						</dl>
						<dl>
							<NavLink to="/productlist">
							<dt><img src={this.state.llist[4].pimg}/></dt>
							<dd>药咨询</dd>
							</NavLink>
						</dl>
					</div>


					<div className="home-tui">
							<div className="tui-left">
										<div className="t-l-top">
											<h2>特价商品</h2>
											<p>药品打折巨划算</p>
										</div>
										<div className="t-l-foot">
											<dl>
												<NavLink to={"/detail/"+this.state.llist[0].pid}>
													<dt><img src={this.state.llist[0].pimg}/></dt>
													<dd>￥{this.state.llist[0].pprice}</dd>
												</NavLink>
											</dl>
											<dl>
												<NavLink to={"/detail/"+this.state.llist[6].pid}>
													<dt><img src={this.state.llist[6].pimg}/></dt>
													<dd>￥{this.state.llist[6].pprice}</dd>
												</NavLink>
											</dl>	
										</div>
							</div>


							<div className="tui-right">
										<div className="t-r-top">
											<h2>特价商品</h2>
											<p>药品打折巨划算</p>
										</div>
										<div className="t-r-foot">
											<dl>
												<NavLink to={"/detail/"+this.state.llist[5].pid}>
													<dt><img src={this.state.llist[5].pimg}/></dt>
													<dd>￥{this.state.llist[5].pprice}</dd>
												</NavLink>
											</dl>
											<dl>
												<NavLink to={"/detail/"+this.state.llist[4].pid}>
													<dt><img src={this.state.llist[4].pimg}/></dt>
													<dd>￥{this.state.llist[4].pprice}</dd>
												</NavLink>
											</dl>	
										</div>
							</div>

					</div>

					<div className="home-jingxuan">
							<h2>精选商品</h2>
							<div className="j-da">
									<div className="j-left">
										<NavLink to={"/detail/"+this.state.llist[0].pid}>
											<p>轻身减肥片</p>
											<p>轻身减肥 益气健脾</p>
											<img src={this.state.llist[0].pimg}/>
										</NavLink>		
									</div>
									<div className="j-right">
											<div className="jx-r-t">
												<NavLink to={"/detail/"+this.state.llist[5].pid}>
													<p>益气养血口服液</p>
													<div><span>益气养血</span><img src={this.state.llist[5].pimg}/></div>
												</NavLink>		
											</div>
											<div className="jx-r-f">
												<NavLink to={"/detail/"+this.state.llist[2].pid}>
													<div>
															<p>安宫牛黄丸</p>
															<p>清热解毒 镇惊开窍</p>
													</div>
												
													<img src={this.state.llist[2].pimg}/>
												</NavLink>
											</div>
									</div>
							</div>
					</div>



					<div className="home-tuangou">
							<h2><span>团购商品</span><span><NavLink to="">更多></NavLink></span></h2>
							<div className="tg-da">
								<div className="tg-left">
									<NavLink to={"/detail/"+this.state.llist[7].pid}>
										<p className="tg-l-t">伤痛宁片</p>
										<img src={this.state.llist[7].pimg}/>
										<p className="tg-l-f">￥{this.state.llist[7].pprice}</p>
									</NavLink>
								</div>

								<div className="tg-right">
									<NavLink to={"/detail/"+this.state.llist[8].pid}>
										<p className="tg-r-t">清热解读口服液</p>
										<img src={this.state.llist[8].pimg}/>
										<p className="tg-r-f">￥{this.state.llist[8].pprice}</p>
									</NavLink>
								</div>

							</div>
					
					</div>

					<div className="home-rexiao">
						<h2 className="rexiao-top"><span>热销推荐</span><span><NavLink to="">更多></NavLink></span></h2>
						<ul className="rexiao-list" >
							{
								this.state.llist.map(function(item,i){
									return(
										<li key={i}>
										<NavLink to={"/detail/"+item.pid}>
											<img src={item.pimg}/>
											<p>{item.pname}</p>
											<p>0.3g*15s*1板</p>
											<p>建议零售价：￥{item.pprice}</p>
										</NavLink>	
									</li>
									)
								})
							}
							{/* <li>
								<NavLink to="">
									<img src={this.state.llist[9].pimg}/>
									<p>抗病毒胶囊</p>
									<p>0.3g*15s*1板</p>
									<p>建议零售价：￥{this.state.llist[9].pprice}</p>
								</NavLink>	
							</li> */}
						</ul>
					</div>


				</div>



			</div>
		)
	}
	componentWillMount(){
		var _this=this;
		$.ajax({
			type:"get",
			url:"http://jx.xuzhixiang.top/ap/api/productlist.php",
			data:{uid:"14632"},
			async:false,
			dataType:'json',
			success:function(data){
				console.log(data.data)
				_this.setState({llist:data.data})
				
			}
		})
		$.ajax({
			type:"get",
			url:"http://jx.xuzhixiang.top/ap/api/bannerlist.php",
			data:{uid:"14632"},
			async:false,
			dataType:'json',
			success:function(data){
				console.log(data.data)
				_this.setState({lblist:data.data})
				
			}
		})

		
		
	
	}
	


}
export default Home;